<template>
  <div class="dropdown">

    <el-collapse accordion>

      <el-collapse-item title="基本信息" class="custom-collapse-item">

        <div style="width:300px;">运输任务编号:<el-button type="text" :disabled="true">{{ taskdetail.uid }}</el-button></div>
        <div style="width:300px;">车牌号码:<el-button type="text" :disabled="true">{{ taskdetail.truck.licensePlate }}</el-button></div>
        <div style="width:300px;">调度机构:<el-button type="text" :disabled="true">{{ taskdetail.startAgency.name }}</el-button></div>
        <div style="width:300px;">起始地:<el-button type="text" :disabled="true">{{ taskdetail.startAgency.name }}</el-button></div>
        <div style="width:300px;">目的地:<el-button type="text" :disabled="true">{{ taskdetail.endAgency.name }}</el-button></div>

      </el-collapse-item>
      <el-collapse-item title="任务轨迹" class="custom-collapse-item">
        <div style="width:300px;">车牌号:<el-button type="text" :disabled="true">{{ taskdetail.truck.licensePlate }}</el-button></div>
        <div style="width:300px;">司机:<el-button type="text" :disabled="true">{{ taskdetail. uname }}</el-button></div>
        <div style="width:300px;">计划发车时间:<el-button type="text" :disabled="true">{{ taskdetail.planDepartureTime }}</el-button></div>
        <div style="width:300px;">实际发车时间:<el-button v-if="taskdetail.actualDepartureTime" type="text" :disabled="true">{{ taskdetail.actualDepartureTime }}</el-button>
          <el-button v-else type="text" :disabled="true">暂未发车</el-button>
        </div>
        <div style="width:300px;">计划到达时间:<el-button type="text" :disabled="true">{{ taskdetail.planArrivalTime }}</el-button></div>
        <div style="width:300px;">实际到达时间:<el-button v-if="taskdetail.actualArrivalTime" type="text" :disabled="true">{{ taskdetail.actualArrivalTime }}</el-button>
          <el-button v-else type="text" :disabled="true">暂未到达</el-button>
        </div>

      </el-collapse-item>
      <el-collapse-item title="货品信息" class="custom-collapse-item">
        <div style="width:100%; padding:30px 30px;">
          <el-table
            :data="transportOrders"
            height="150"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              width="80"
            >
              <template slot-scope="{ $index }">
                {{ $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="运单编号"
              width="180"
            />
            <el-table-column
              prop="createTime"
              label="下单时间"
              width="180"
            />
            <el-table-column
              prop="senderName"
              label="发件人姓名"
            />
            <el-table-column
              prop="senderPhone"
              label="发件人电话"
            />
            <el-table-column

              prop="senderAddress"
              label="发件人地址"
            />
            <el-table-column
              prop="transportOrderCount"
              label="货品数量"
            />
            <el-table-column
              label="操作"
            >
              <!-- 跳转运单管理页面，等组员做完 -->
              <el-button type="text" size="small" @click="$router.push({path:'/business/waybillDetails',query: {id:transportOrders[0].id}})">查看详情</el-button>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
      <el-collapse-item title="交付照片" class="custom-collapse-item">
        <div class="demo-image__preview" style="margin-top:30px;">
          <div style="font-size:16px;">货品图片</div>
          <!-- <el-image
            v-if="url"
            style="width: 260px; height: 190px"
            :src="url"
            :preview-src-list="srcList"
          /> -->
          <el-image

            style="width: 260px; height: 190px"
            :src="require('@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png')"
          />
        </div>

        <div class="demo-image__preview" style="margin-top:30px;">
          <div style="font-size:16px;">凭证照片</div>
          <!-- <el-image
            v-if="url1"
            style="width: 260px; height: 190px"
            :src="url1"
            :preview-src-list="srcList1"
          /> -->
          <el-image
            style="width: 260px; height: 190px"
            :src="require('@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png')"
          />

        </div>
      </el-collapse-item>
      <el-collapse-item title="提货照片" class="custom-collapse-item">
        <div class="demo-image__preview" style="margin-top:30px;">
          <div style="font-size:16px;">货品图片</div>
          <!-- <el-image
            v-if="url2"
            style="width: 260px; height: 190px"
            :src="url2"
            :preview-src-list="srcList2"
          /> -->
          <el-image

            style="width: 260px; height: 190px"
            :src="require('@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png')"
          />

        </div>
        <div class="demo-image__preview" style="margin-top:30px;">
          <div style="font-size:16px;">凭证照片</div>
          <!-- <el-image
            v-if="url3"
            style="width: 260px; height: 190px"
            :src="url3"
            :preview-src-list="srcList3"
          /> -->
          <el-image

            style="width: 260px; height: 190px"
            :src="require('@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png')"
          />

        </div>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
import { getTransport } from '@/api/task.js'

export default {
  data() {
    return {
      taskdetail: {
        uname: '',
        truck: {},
        startAgency: {},
        endAgency: {},
        drivers: [],
        planDepartureTime: '',
        uid: null,
        actualArrivalTime: null,
        planArrivalTime: ''
      },
      transportOrders: [
        {
          id: '',
          createTime: '',
          senderName: '',
          senderPhone: '',
          senderAddress: '',
          transportOrderCount: ''

        }
      ],
      srcList: [],
      srcList1: [],
      srcList2: [],
      srcList3: [],
      srcList4: ['@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png'],

      url: '',
      url1: '',
      url2: '',
      url3: '',
      url4: '@/assets/image/282b9ee4-9edc-40e9-b365-84dec2cce429.png'

    }
  },
  created() {
    this.getTransport(this.$route.params.id)
  },
  methods: {
    async getTransport(id) {
      const { deliverPicture, truck, startAgency, endAgency, drivers, id: uid, planDepartureTime, actualArrivalTime, planArrivalTime, transportOrders } = await getTransport(id)
      this.taskdetail.truck = truck
      this.taskdetail.planDepartureTime = planDepartureTime
      this.taskdetail.uid = uid
      this.taskdetail.actualArrivalTime = actualArrivalTime
      this.taskdetail.startAgency = startAgency
      this.taskdetail.endAgency = endAgency
      this.taskdetail.uname = drivers[0].name
      this.taskdetail.planArrivalTime = planArrivalTime
      // 货品信息
      this.transportOrders[0].id = transportOrders[0].id
      this.transportOrders[0].createTime = transportOrders[0].order.createTime
      this.transportOrders[0].senderName = transportOrders[0].order.senderName
      this.transportOrders[0].senderPhone = transportOrders[0].order.senderPhone
      this.transportOrders[0].senderAddress = transportOrders[0].order.senderAddress

      this.url = deliverPicture
      this.srcList.push(deliverPicture)
    }
  }
}
</script>

<style>

.has-gutter{
  background-color: #f8faff;
}
.app-main,.el-collapse{
  background-color: #f3f4f7;
}

.custom-collapse-item{
  margin-top: 30px;

}
.el-collapse-item__content{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.custom-collapse-item .el-collapse-item__header {
  font-size: 16px;
  font-weight: 700;
  height: 60px;

  border: none;
  background: #f8faff;
}
.el-collapse{
padding-left: 20px;
padding-right: 20px;

}
</style>
